/**
 *通用形列表-列表部分
 */
<template>
    <div 
        v-if="tableObj?.tableIsShowEditButton"
        class="btn-padding-bottom"
    >
        <el-button 
            type="primary"
            :icon="Plus"
            :disabled="false"
            @click="addItem"
        >
            新增
        </el-button>
        <el-button 
            type="danger"
            :icon="Delete"
            :disabled="tableObj.tableData.length == 0"
            @click="delItem"
        >
            删除
        </el-button>
    </div>
    <el-table 
        ref="tableRef" 
        :data="tableObj?.tableData" 
        :border="tableObj.tableBorder"
        :stripe="tableObj.tableStripe"
        :fit="tableObj.tableFit"
        :show-header="tableObj.tableShowHeader"
        :row-class-name="tableObj.tableRowClassName" 
        :height="tableObj.tableHeight"
        :max-height="tableObj.tableMaxHeight"
        :highlight-current-row="tableObj.tableHighlightCurrentRow"
        :default-sort="tableObj.tableDefaultSort"
        :row-key="tableObj.tableRowKey"
        :default-expand-all="tableObj.tableDefaultExpandAll"
        :show-summary="tableObj.tableShowSummary"
        :summary-method="tableObj.tableSummaryMethod"
        :span-method="tableObj.tableSpanMethod"
        :table-layout="tableObj.tableLayout"
        class="my-table"
        @current-change="tableObj.tableCurrentChange"
        @row-dblclick="tableObj.tableRowDblclick"
        @selection-change="selectionChange"
    >
        <!-- <el-table-column 
            v-for="(item, index) in tableObj.tableColumn"
            :key="`${index}`"
            :prop="item.tableProp" 
            :label="item.tableLabel" 
            :width="item.tableWidth" 
            :show-overflow-tooltip="item.tableShowOverflowTooltip"
            :fixed="item.tableFixed"
        >
        </el-table-column> -->
        <GeneralTabelListColumn 
            v-model:tableColumn="tableObj.tableColumn" 
        />
    </el-table>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import {  } from '@/apis'
    import { isPhone } from '@/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
        Plus,
        Delete,
    } from '@element-plus/icons-vue'
    import GeneralTabelListColumn from './components/generalTabelListColumn/GeneralTabelListColumn.vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const tableRef = ref(null)
    defineExpose({
        tableRef
    })
    onMounted(() => {

    })
    const tableObj = defineModel<any>('tableObj', {
        required: false,
        default: {
            tableData: [],
            tableColumn: [],
        }
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        'tabelSearch': [data: any]
    }>()
    const selection: Ref<any[]> = ref([])
    const selectionChange = (val: any,) => {
        console.log(val)
        selection.value = val
        tableObj.value.tableSelectionChange(val)
    }
    const addItem = () => {
        let obj = {}
        tableObj.value.tableColumn.forEach((item: any) => {
            if (item.tableProp) {
                obj[item.tableProp] = item.tableContentDefaultValue ? item.tableContentDefaultValue : ''
            }
        })
        tableObj.value.tableData.push(obj)
        
    }
    const delItem = () => {
        selection.value.reduce((prev, cur, index, arr) => {
            prev.forEach((item: any, idx: number) => {
                if (item == cur) {
                    prev.splice(idx, 1)
                    return prev
                }
            })
        }, tableObj.value.tableData)
    }
</script>

<style lang="scss" scoped>
    .my-table {
        width: 100%;
        flex: 1;
    }
    // tableRowClassName写的自定义样式
    .my-table :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .my-table :deep(.success-row ) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
    .btn-padding-bottom {
        padding-bottom: 10px;
    }
</style>